<script setup lang="ts">
import { computed } from "vue";
import type { StyleValue } from "vue"
const props = defineProps({
  text: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: '14',
  },
  iconSize: {
    type: String,
    default: null,
  },
  gutter: {
    type: String,
    default: '15',
  },
  color: {
    type: String,
    default: '#000',
  },
  align: {
    type: String,
    default: 'left',
  }
});
const textStyle = computed((): StyleValue  => {
    return ({
        color: props.color,
        fontSize: `${props.size}px`,
        paddingLeft: `${props.gutter}px`,
        textAlign: props.align,
    }) as StyleValue
})
</script>

<template>
  <div class="cell">
    <div class="cell-hd">
      <img :src="icon" :height="iconSize || size"/>
    </div>
    <div
        class="cell-bd"
        :style="textStyle"
    >{{text}}</div>
  </div>
</template>

<style scoped>
.cell{
    font-size: 0;
  .cell-bd{
    padding-left: 5px;
  }
}
</style>
